import React, { Component } from 'react';
import { connect } from 'dva';
import { Checkbox, Alert, Select } from 'antd';
import Login from 'components/Login';
import styles from './Login.less';
import './login.css';
import { routerRedux } from 'dva/router';

const { UserName, Password, Submit } = Login;
const { Option } = Select;

const selectValue = {
  roleCode: '1',
};

// http://localhost:17000/doLogin

@connect(({ login, loading }) => ({
  login,
  submitting: loading.effects['login/login'],
}))
export default class LoginPage extends Component {
  state = {
    autoLogin: true,
  };

  handleSubmit = (err, values) => {
    console.log("触发登录");
    console.log(values);
    const { dispatch } = this.props;
    if (!err) {
      dispatch({
        type: 'login/login',
        payload: {
          ...values,
          ...selectValue
        },
        method: 'POST'
      });
    }
  };

  changeAutoLogin = e => {
    this.setState({
      autoLogin: e.target.checked,
    });
  };


  changeSelect = (value) => {
    console.log(value);
    selectValue.role = value;
  };

  // 进入忘记密码页面
  toForgetPassword = () => {
    const { dispatch } = this.props;
    dispatch(routerRedux.push({ 
        pathname: '/user/forgetPassword'
    }));
  }

  renderMessage = content => {
    return <Alert style={{ marginBottom: 24 }} message={content} type="error" showIcon />;
  };

  render() {
    const { login, submitting } = this.props;
    const { type, autoLogin } = this.state;
    return (
      <div className={styles.main}>
        <Login defaultActiveKey={type} onTabChange={this.onTabChange} onSubmit={this.handleSubmit}>
          {/* <Tab key="account" tab="账户密码登录">
            {login.status === 'error' &&
              login.type === 'account' &&
              !submitting &&
              this.renderMessage('账户或密码错误（admin/888888）')}
            <UserName name="userName" placeholder="admin/user" />
            <Password name="password" placeholder="888888/123456" />
          </Tab> */}
          <div className="login">
            <div className={styles.loginName}>集鲜丰后台系统登录</div>
            {login.status === 'error' &&
            login.type === 'account' &&
            !submitting &&
            this.renderMessage('集鲜丰登录账号有误，请重新输入')}
            <Select 
              size="large" 
              classname={styles.select} 
              name="roleCode" 
              style={{ height: 40, marginBottom: 24 }} 
              placeholder="请选择一个角色"
              defaultValue="1"
              onChange={this.changeSelect}
            >
                <Select.Option value="1">管理后台</Select.Option>
                <Select.Option value="3">子公司后台</Select.Option>
                <Select.Option value="7">合作伙伴后台</Select.Option>
                <Select.Option value="9">渠道商后台</Select.Option>
                <Select.Option value="8">业务员后台</Select.Option>
                <Select.Option value="2">供应商后台</Select.Option>
                <Select.Option value="4">采购商后台</Select.Option>
            </Select>
            <UserName name="telphone" placeholder="请输入账号" />
            <Password name="password" placeholder="请输入密码" />
          </div>
          <div>
            <Checkbox checked={autoLogin} onChange={this.changeAutoLogin}>
              <span style={{ color: '#555' }}>自动登录</span>
            </Checkbox>
            <a style={{ float: 'right' }} onClick={this.toForgetPassword}>
              忘记密码
            </a>
          </div>
          <Submit loading={submitting}>登录</Submit>
        </Login>
      </div>
    );
  }
}
